<template>
  <div class="page-layout">
    <div class="header-container">
      <el-form :inline="true" :model="searchForm" class="header-form search-form">
        <el-form-item label="开始时间" class="time-period-picker">
          <el-date-picker v-model="searchForm.startDate" type="date" placeholder="开始时间" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="结束时间" class="time-period-picker">
          <el-date-picker v-model="searchForm.endDate" type="date" placeholder="结束时间" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        height="70vh"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :span-method="spanMethod"
        show-summary
        border
      >
        <el-table-column prop="line" label="产线" />
        <el-table-column prop="hsType" label="高强品种" />
        <el-table-column label="1日实际">
          <el-table-column prop="hs1" label="高强钢量（吨）" />
          <el-table-column prop="hsRate1" label="高强钢占比">
            <template #default="{ row }">
              {{ row.hsRate1 + '%' }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="2日实际">
          <el-table-column prop="hs2" label="高强钢量（吨）" />
          <el-table-column prop="hsRate2" label="高强钢占比">
            <template #default="{ row }">
              {{ row.hsRate2 + '%' }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="当月累计实际">
          <el-table-column prop="curhs" label="高强钢量（吨）" />
          <el-table-column prop="curhsRate" label="高强钢占比">
            <template #default="{ row }">
              {{ row.curhsRate + '%' }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  const searchForm = reactive({
    startDate: '',
    endDate: '',
  });

  // 搜索方法
  const handleSearch = async () => {
    // fetchData();
  };

  // 重置方法
  const handleReset = async () => {
    searchForm.startDate = '';
    searchForm.endDate = '';
    // fetchData();
  };

  const tableData = ref<any>([
    {
      line: '2#连退（≥1500mm）',
      hsType: '590MPa级别',
      hs1: 9088,
      hsRate1: 6.12,
      hs2: 9088,
      hsRate2: 6.12,
      curhs: 9088,
      curhsRate: 6.12,
    },
    {
      line: '2#连退（≥1500mm）',
      hsType: '780MPa级别',
      hs1: 534,
      hsRate1: 0.36,
      hs2: 534,
      hsRate2: 0.36,
      curhs: 534,
      curhsRate: 0.36,
    },
    {
      line: '2#连退（≥1500mm）',
      hsType: '热压成型钢（PHS1500/1800/2000）',
      hs1: 6623,
      hsRate1: 4.46,
      hs2: 6623,
      hsRate2: 4.46,
      curhs: 6623,
      curhsRate: 4.46,
    },
    {
      line: '3#连退（＜1500mm）',
      hsType: '590MPa级别',
      hs1: 16966,
      hsRate1: 11.42,
      hs2: 16966,
      hsRate2: 11.42,
      curhs: 16966,
      curhsRate: 11.42,
    },
    {
      line: '3#连退（＜1500mm）',
      hsType: '780MPa级别',
      hs1: 4117,
      hsRate1: 2.77,
      hs2: 4117,
      hsRate2: 2.77,
      curhs: 4117,
      curhsRate: 2.77,
    },
    {
      line: '3#连退（＜1500mm）',
      hsType: '980MPa级别及以上',
      hs1: 36,
      hsRate1: 0.02,
      hs2: 36,
      hsRate2: 0.02,
      curhs: 36,
      curhsRate: 0.02,
    },
    {
      line: '3#连退（＜1500mm）',
      hsType: '热压成型钢（PHS1500/1800/2000）',
      hs1: 6515,
      hsRate1: 4.38,
      hs2: 6515,
      hsRate2: 4.38,
      curhs: 6515,
      curhsRate: 4.38,
    },
    {
      line: '5#镀锌（＜1500mm）',
      hsType: '590MPa级别',
      hs1: 16966,
      hsRate1: 11.42,
      hs2: 16966,
      hsRate2: 11.42,
      curhs: 16966,
      curhsRate: 11.42,
    },
    {
      line: '5#镀锌（＜1500mm）',
      hsType: '780MPa级别',
      hs1: 4117,
      hsRate1: 2.77,
      hs2: 4117,
      hsRate2: 2.77,
      curhs: 4117,
      curhsRate: 2.77,
    },
    {
      line: '5#镀锌（＜1500mm）',
      hsType: '980MPa级别及以上',
      hs1: 36,
      hsRate1: 0.02,
      hs2: 36,
      hsRate2: 0.02,
      curhs: 36,
      curhsRate: 0.02,
    },
    {
      line: '5#镀锌（＜1500mm）',
      hsType: '热压成型钢（PHS1500/1800/2000）',
      hs1: 6515,
      hsRate1: 4.38,
      hs2: 6515,
      hsRate2: 4.38,
      curhs: 6515,
      curhsRate: 4.38,
    },
  ]);

  const spanMethod = ({ row, rowIndex, columnIndex }: { row: any; rowIndex: number; columnIndex: number }) => {
    if (columnIndex === 0) {
      // 假设根据row.area判断是否相同区域
      if (rowIndex === 0 || row.line !== tableData.value[rowIndex - 1]?.line) {
        let rowspan = 1;
        // 计算连续相同区域的行数
        while (rowIndex + rowspan < tableData.value.length && tableData.value[rowIndex + rowspan].line === row.line) {
          rowspan++;
        }
        return { rowspan, colspan: 1 };
      } else {
        return { rowspan: 0, colspan: 0 };
      }
    }
    return { rowspan: 1, colspan: 1 };
  };
</script>
<style lang="less" scoped>
  .page-layout {
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    gap: 1vh;
    padding: 20px;
    width: 99.5%;
  }

  .header-container {
    min-height: 6vh;
    width: 100%;
  }

  .table-container {
    padding: 12px;
    // background-color: #eee;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #ccc;
  }
</style>
